<template>
  <div class="page-container">
    <!--工具栏-->
    <div
      class="toolbar"
      style="float:left;padding-top:10px;padding-left:15px;width: 100%;"
    >
      <el-steps
        :active="active"
        finish-status="success"
        simple
        style="margin-top: 20px"
      >
        <el-step title="1、设置促销规则"></el-step>
        <el-step title="2、选择参与商家/店铺"></el-step>
        <el-step title="3、添加活动商品"></el-step>
        <el-step title="4、提交审核"></el-step>
      </el-steps>
      <div v-show="active == 1">
        <form class="form-horizontal mgt15">
          <div class="pdL10 border-left font-bold mgB15 ng-binding">
            基本信息
          </div>
          <div class="form-group">
            <!--活动名称-->
            <label class="col-sm-2 control-label ng-binding"
              >促销活动名称</label
            >
            <!-- <label class="col-sm-2 control-label ng-binding ng-hide" ng-show="promotionDetailContent.promotionType == 13 &amp;&amp; promotionDetailContent.promotionMethod == 17">定金支付时间</label> -->
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-input placeholder="限制在64个字符以内"></el-input>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group">
            <!--活动时间-->
            <label class="col-sm-2 control-label ng-binding">活动时间</label>
            <!-- <label class="col-sm-2 control-label ng-binding ng-hide" v-show="promotionDetail.promotionType == 13 || promotionDetail.promotionType == 17">定金支付时间</label> -->
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-date-picker
                v-model="filters.startTime"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="活动开始"
                class="input_postion"
              ></el-date-picker
              >至
              <el-date-picker
                v-model="filters.endTime"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="活动结束"
                class="input_postion"
              ></el-date-picker>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="pdL10 border-left font-bold mgB15 ng-binding">
            活动规则
          </div>
          <div class="form-group ng-scope">
            <!--选品范围(参与)-->
            <label class="col-sm-2 control-label ng-binding">选品范围</label>
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="radio1">
                <el-radio :label="3" class="form-radio">部分参与</el-radio>
                <el-radio :label="6" class="form-radio">全场参与</el-radio>
              </el-radio-group>
            </div>
          </div>

          <div class="form-group ng-scope " style="margin-top: 45px;">
            <!--促销类型(促销类型)-->
            <label class="col-sm-2 control-label ng-binding">促销类型</label>
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="radio1">
                <el-radio :label="3" class="form-radio">满额减</el-radio>
                <el-radio :label="6" class="form-radio">满额折</el-radio>
              </el-radio-group>
            </div>
          </div>

          <div class="form-group ng-scope " style="margin-top: 75px;">
            <!--促销类型(促销类型)-->
            <label class="col-sm-2 control-label ng-binding"
              >是否叠加应用</label
            >
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="isChange" @change="changeRadio">
                <el-radio :label="0" class="form-radio"
                  >否（超量：按最高层级享受优惠）</el-radio
                >
                <el-radio :label="1" class="form-radio"
                  >是（倍量：每满一级优惠一次），上限</el-radio
                >
              </el-radio-group>
              <el-input
                v-model="input"
                style="width: 200px; margin-left: 50px;"
                :disabled="inputDisabled"
              ></el-input
              >次
            </div>
          </div>

          <div class="form-group ng-scope 11111111" style="margin-top:120px;">
            <label class="col-sm-2 control-label ng-binding">优惠设置</label>
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-table :data="couponSetData" style="width:1200px">
                <el-table-column prop="couponSetindex" label="优惠阶梯">
                  <template slot-scope="scope">
                    <label>{{ scope.$index + 1 }}</label>
                  </template>
                </el-table-column>
                <el-table-column prop="content" label="优惠门槛">
                  <template slot-scope="scope">
                    <div>
                      满<el-input
                        v-model="scope.row.number"
                        placeholder="X"
                        style="width:100px"
                      ></el-input
                      >件, 减<el-input
                        v-model="scope.row.discount"
                        placeholder="Y"
                        style="width:100px"
                      ></el-input
                      >元
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="explain" label="优惠说明">
                  <template slot-scope="scope">
                    <label>满{{scope.row.number}}件;减{{scope.row.discount}}元;</label>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="danger"
                      v-if="scope.$index != 0"
                      @click="removeCouponSet(scope.$index, scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-plus"
                style=" margin-top: 10px;"
                @click="addCouponSet"
                v-show="addCouponSetShow"
                >新增优惠</el-button
              >
            </div>
          </div>

          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group ng-scope" ng-controller="promRuleDescCtrl">
            <label class="col-sm-2 control-label ng-binding">活动描述</label>
            <div class="col-sm-9">
              <label class="col-sm-1 ng-binding">中文</label>
              <div class="col--sm-4">
                <el-input
                  type="text"
                  class="form-control mgB10 ng-pristine ng-valid"
                  maxlength="100"
                  placeholder="最多输入100个字"
                ></el-input>
              </div>
              <div class="col--sm-12">
                <label class="mgB0 ng-binding"
                  >注：非必填字段，不填将显示系统默认文案。自定义输入活动说明后将显示在前台商品详情页中，请认真填写。</label
                >
                <a
                  href
                  style="color:blue;text-decoration:underline;"
                  data-toggle="modal"
                  data-target="#custom-width-modal-img"
                >
                  <!-- <i class="ng-binding">查看示例</i> -->
                </a>
              </div>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="pdL10 border-left font-bold mgB15 ng-binding ng-scope">
            交易规则
          </div>

          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group">
            <!--是否排斥优惠券-->
            <label class="col-sm-2 control-label ng-binding"
              >是否排斥优惠券</label
            >
            <!-- <label class="col-sm-2 control-label ng-binding ng-hide">是否排斥优惠券（尾款支付）</label> -->
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="radio3">
                <el-radio :label="3" class="form-radio">是</el-radio>
                <el-radio :label="6" class="form-radio">否</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="form-group ng-scope">
            <!--是否包邮-->
            <label class="col-sm-2 control-label ng-binding">是否包邮</label>
            <!-- <label class="col-sm-2 control-label ng-binding ng-hide" ng-show="promotionDetailContent.promotionType==9">包邮方式</label> -->
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="radio4">
                <el-radio :label="6" class="form-radio">是</el-radio>
                <el-radio :label="3" class="form-radio">否</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <!-- <div class="form-group ng-scope">
            <label class="col-sm-2 control-label ng-binding">超限规则</label>
            <div class="col-sm-10 pdt3px themeTextColor ng-binding">
              <el-radio-group v-model="radio5">
                <el-radio :label="6" class="form-radio">按原价购买</el-radio>
                <el-radio :label="3" class="form-radio">不可购买</el-radio>
              </el-radio-group>
              <br />
              <label class="control-label ng-binding"
                >注：超限规则指用户购买商品数量超过活动可购买数量（通过活动设置的"个人限购数、活动总限购数、每单限购数"计算出）后的购买规则。</label
              >
            </div>
          </div> -->
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div ng-show="supplierAllocationShow()" class>
            <div class="col-sm-2 control-label">
              <label class="ng-binding">供应商分摊比例：</label>
            </div>
            <div class="mgT10">
              <div class="row mgB10">
                <div class="col-sm-2 m-b-xs">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="querySupplierListForAdd()"
                    >选择供应商</el-button
                  >
                  <el-button
                    type="danger"
                    size="mini"
                    @click="delAllSelectedSupplier()"
                    >批量删除</el-button
                  >
                </div>
                <span class="col-sm-3 m-b-xs"
                  >不选择时默认不分摊，全部有商家或平台承担</span
                >
              </div>

              <el-table :data="tableDataSupplier" border style="width: 100%;" v-show="supplier"  @selection-change="addSelectionChange" >
                  <el-table-column type="selection" width="60"></el-table-column>
                  <el-table-column prop="id" label="供应商编码"  width="240"></el-table-column>
                  <el-table-column prop="productName" label="供应商名称"  width="240"></el-table-column>


                      <el-table-column prop="productName" label="分摊比例"  width="240">
                         <template slot-scope="scope">
                           <el-input  placeholder="请输入" size="mini">%</el-input>
                        </template>
                      </el-table-column>

              </el-table>


              <div class="portlet-body flip-scroll" hidden>
                <table
                  class="table-striped table-condensed flip-content ng-hide"
                  ng-show="selectedSupplierList.length>0"
                >
                  <thead>
                    <tr>
                      <th style="width:100px;" class="ng-binding">
                        <label class="i-checks m-b-none">
                          <input
                            type="checkbox"
                            name="selected"
                            ng-click="selectedChkAll()"
                            ng-checked="isSelectedChkAll()"
                          />
                          <i></i>
                        </label>
                        全选
                      </th>
                      <th class="minw80 textCenter">供应商ID</th>
                      <th class="minw80 textCenter">供应商名称</th>
                      <th class="minw80 textCenter">
                        <i class="asterisk">*</i>分摊比例
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <!-- ngRepeat: e in selectedSupplierList -->
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div class="pdL10 border-left font-bold mgB15 ng-binding">
            参与条件
          </div>
          <div class="line line-dashed b-b line-lg ng-scope"></div>
          <div ng-controller="activitiObjDetailCtrl" class="ng-scope">
            <!--活动渠道-->
            <div
              class="line line-dashed b-b line-lg"
              ng-show="promotionDetailContent.channelCodes.length > 0"
            ></div>
            <div
              class="form-group ng-scope"
              ng-if="promotionDetailContent.channelCodes.length > 0"
            >
              <label class="col-sm-2 control-label ng-binding">活动渠道</label>

              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                  >全选</el-checkbox
                >
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group
                  v-model="checkedCities"
                  @change="handleCheckedCitiesChange"
                >
                  <el-checkbox
                    v-for="city in cities"
                    :label="city"
                    :key="city"
                    >{{ city }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>

            <div
              class="line line-dashed b-b line-lg"
              ng-show="canShowActivityPlatformLimitShow()"
            ></div>
            <div
              class="form-group ng-scope"
              ng-if="canShowActivityPlatformLimitShow()"
            >
              <label class="col-sm-2 control-label ng-binding">活动平台</label>
              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate1"
                  v-model="checkAll1"
                  @change="handleCheckAllChange1"
                  >全选</el-checkbox
                >
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group
                  v-model="checkedCities1"
                  @change="handleCheckedCitiesChange1"
                >
                  <el-checkbox
                    v-for="city in cities1"
                    :label="city"
                    :key="city"
                    >{{ city }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>

            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group">
              <label class="col-sm-2 control-label ng-binding">新老用户</label>
              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate2"
                  v-model="checkAll2"
                  @change="handleCheckAllChange2"
                  >全选</el-checkbox
                >
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group
                  v-model="checkedCities2"
                  @change="handleCheckedCitiesChange2"
                >
                  <el-checkbox
                    v-for="city in cities2"
                    :label="city"
                    :key="city"
                    >{{ city }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>
            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group">
              <label class="col-sm-2 control-label ng-binding">会员类型</label>
              <div class="col-sm-10 pdt3px">
                <el-checkbox
                  :indeterminate="isIndeterminate3"
                  v-model="checkAll3"
                  @change="handleCheckAllChange3"
                  >全选</el-checkbox
                >
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group
                  v-model="checkedCities3"
                  @change="handleCheckedCitiesChange3"
                >
                  <el-checkbox
                    v-for="city in cities3"
                    :label="city"
                    :key="city"
                    >{{ city }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>
            <!-- 会员等级(修改) -->
            <div class="line line-dashed b-b line-lg"></div>
            <div class="form-group">
              <div ng-repeat="e in memberLevelArray" class="ng-scope">
                <label
                  class="col-sm-2 control-label ng-binding ng-scope"
                  ng-if="$index==0"
                  >会员等级:</label
                >
                <div class="col-sm-10 pdt3px">
                  <el-checkbox
                    :indeterminate="isIndeterminate4"
                    v-model="checkAll4"
                    @change="handleCheckAllChange4"
                    >全选</el-checkbox
                  >
                  <div style="margin: 15px 0;"></div>
                  <el-checkbox-group
                    v-model="checkedCities4"
                    @change="handleCheckedCitiesChange4"
                  >
                    <el-checkbox
                      v-for="city in cities4"
                      :label="city"
                      :key="city"
                      >{{ city }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
              </div>
            </div>
            <div class="line line-dashed b-b line-lg"></div>
            <div
              class="form-group ng-scope"
              ng-if="promotionDetailContent.promotionType != 12"
            >
              <!--备注-->
              <label class="col-sm-2 control-label ng-binding">备注</label>
              <div class="col-sm-10 pdt3px themeTextColor">
                <quill-editor
                  v-model="content"
                  ref="myQuillEditor"
                  style="height: 300px;"
                  :options="editorOption"
                ></quill-editor>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="tab-container" v-show="active == 2">
        <el-tabs type="border-card" style="margin-top: 15px;">
          <el-tab-pane label="商家">
            <div style="float: left;margin-bottom: 10px;">
              <el-button
                type="primary"
                size="mini"
                @click="querySupplierListForAdd()"
                >添加商家</el-button
              >
              <el-button
                type="danger"
                size="mini"
                @click="delAllSelectedSupplier()"
                >批量删除</el-button
              >
            </div>
            <el-table :data="businessList" border style="width: 100%">
              <el-table-column prop="id" label="商品编号"></el-table-column>
              <el-table-column prop="name" label="商家名称"></el-table-column>
              <el-table-column prop="type" label="组织分类"></el-table-column>
              <el-table-column prop="type" label="操作"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="店铺">
            <div style="float: left;margin-bottom: 10px;">
              <el-button
                type="primary"
                size="mini"
                @click="querySupplierListForAdd2()"
                >添加店铺</el-button
              >
              <el-button
                type="danger"
                size="mini"
                @click="delAllSelectedSupplier()"
                >批量删除</el-button
              >
            </div>
            <el-table :data="shopList" border style="width: 100%">
              <el-table-column prop="id" label="店铺编号"></el-table-column>
              <el-table-column prop="name" label="店铺名称"></el-table-column>
              <el-table-column prop="type" label="店铺类型"></el-table-column>
              <el-table-column prop="type" label="操作"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="tab-container" v-show="active == 3">
        <el-tabs type="border-card">
          <div style=" height: 40px;">
            <el-button
              size="mini"
              style="float: left;"
              type="primary"
              @click="productSelectionModal()"
              >添加追加商品</el-button
            >
            <el-button
              size="mini"
              style="float: left;"
              type="danger"
              v-show="modalShow == 1"
              @click="delMerchantProducts()"
              >批量删除</el-button
            >
            <el-button
              size="mini"
              style="float: left;"
              type="primary"
              v-show="modalShow == 2"
              @click="batchReAdd()"
              >批量重新添加</el-button
            >
            <el-button-group style="float:right;">
              <el-button size="mini" @click="importCommodityModal(1)"
                >模板下载<i class="el-icon-download el-icon--right"></i
              ></el-button>
              <el-button size="mini" @click="importCommodityModal(2)"
                >商品导入<i class="el-icon-upload el-icon--right"></i
              ></el-button>
            </el-button-group>
          </div>
          <el-tabs
            type="border-card"
            v-model="activeName"
            @tab-click="handleClick"
          >
            <el-tab-pane label="生效商品(1)" name="0">
              <div>
                <div style="margin-bottom: 10px;float: right;">
                  <el-button-group>
                    <el-button
                      size="mini"
                      style="float: left;"
                      type="info"
                      icon="el-icon-edit"
                      @click="showBatchSetUp()"
                      >批量设置</el-button
                    >
                    <el-button
                      size="mini"
                      style="float: left;"
                      type="info"
                      icon="el-icon-search"
                      @click="showQueryCondition()"
                      >搜索</el-button
                    >
                  </el-button-group>
                </div>
                <div>
                  <div
                    style="padding-top: 40px;padding-bottom: 20px;"
                    v-show="setUp"
                  >
                    <el-form :model="dataForm" :inline="true">
                      <el-form-item label="商品品牌">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="商品品牌">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="商品品牌">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="商品品牌">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="商品品牌">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                    </el-form>
                    <div
                      style="margin-bottom: 20px;float: right;margin-right: 13.8%;"
                    >
                      <el-button
                        size="mini"
                        style="float: left;"
                        type="primary"
                        @click="batchReAdd()"
                        >保存</el-button
                      >
                    </div>
                  </div>
                  <div
                    style="padding-top: 40px;padding-bottom: 20px;"
                    v-show="search"
                  >
                    <el-form :model="dataForm" :inline="true">
                      <el-form-item label="商家">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="商品编号">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="商品名称">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="商品条码">
                        <el-input
                          v-model="dataForm.key"
                          auto-complete="off"
                        ></el-input>
                      </el-form-item>
                    </el-form>
                    <div
                      style="margin-bottom: 20px;float: right;margin-right: 13.8%;"
                    >
                      <el-button
                        size="mini"
                        style="float: left;"
                        type="primary"
                        @click="batchReAdd()"
                        >查询</el-button
                      >
                      <el-button
                        size="mini"
                        style="float: left;"
                        type="primary"
                        @click="batchReAdd()"
                        >重置</el-button
                      >
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <el-table
                  :data="tableData"
                  border
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column
                    type="selection"
                    width="55"
                  ></el-table-column>
                  <el-table-column
                    prop="id"
                    label="商品编号"
                    width="180"
                  ></el-table-column>
                  <el-table-column
                    prop="productName"
                    label="商品名称"
                    width="180"
                  ></el-table-column>
                  <el-table-column
                    prop="address"
                    label="商品条码"
                  ></el-table-column>
                  <el-table-column
                    prop="unit"
                    label="计量单位"
                  ></el-table-column>
                  <el-table-column
                    prop="shopName"
                    label="商家名称"
                  ></el-table-column>
                  <el-table-column
                    prop="price"
                    label="统一零售价（元）"
                  ></el-table-column>
                  <el-table-column
                    prop="markdown"
                    label="直降（元）"
                  ></el-table-column>
                  <el-table-column
                    prop="shopLimit1"
                    label="商家单渠道限购"
                  ></el-table-column>
                  <el-table-column
                    prop="shopLimit2"
                    label="店铺单渠道限购"
                  ></el-table-column>
                  <el-table-column
                    prop="shopLimit3"
                    label="个人单渠道限购"
                  ></el-table-column>
                  <el-table-column
                    prop="address"
                    label="订单限购"
                  ></el-table-column>
                </el-table>
              </div>
              <div style="margin-top: 10px;">
                <el-button
                  size="mini"
                  type="primary"
                  @click="updatePriceAndLimit()"
                  >确认添加</el-button
                >
              </div>
            </el-tab-pane>
            <el-tab-pane label="互斥商品(0)" name="1">
              <el-table
                border
                style="width: 100%"
                @selection-change="repelSelectionChange"
              >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column
                  prop="id"
                  label="商品编号"
                  width="180"
                ></el-table-column>
                <el-table-column
                  prop="productName"
                  label="商品名称"
                  width="180"
                ></el-table-column>
                <el-table-column
                  prop="address"
                  label="商品条码"
                ></el-table-column>
                <el-table-column prop="unit" label="计量单位"></el-table-column>
                <el-table-column
                  prop="shopName"
                  label="商家名称"
                ></el-table-column>
                <el-table-column
                  prop="price"
                  label="互斥记录时间"
                ></el-table-column>
                <el-table-column prop="markdown" label="操作"></el-table-column>
              </el-table>
              <div style="margin-top: 10px;">
                <el-button
                  size="mini"
                  type="primary"
                  @click="promotionPriceCheckAndSubmit()"
                  >确认添加</el-button
                >
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tabs>
      </div>
      <div class="tab-container" v-show="active == 4">
        <div style="font-size:25px;text-align: center;margin-top: 27px;">
          <el-alert
            title="等待审核,审核通过后立即生效"
            type="success"
            center
          ></el-alert>
        </div>
      </div>
    </div>
    <div>
      <el-button style="margin-top: 60px;margin-bottom: 60px;" @click="next"
        >下一步</el-button
      >
    </div>
    <!-- 选择参与商家 -->
    <el-dialog
      :title="'添加供应商'"
      width="40%"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
    >
      <div>
        <div>
          <el-form :inline="true" :model="dataForm" size="mini">
            <el-form-item label="供应商编码" label-width="100px">
              <el-input
                v-model="dataForm.number"
                placeholder=""
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item label="供应商名称" label-width="100px">
              <el-input
                v-model="dataForm.name"
                placeholder=""
                size="mini"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-button size="mini">查询</el-button>
          <el-button size="mini">重置</el-button>
        </div>
        <div style="padding-top: 45px;">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="addSelectionChange"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="id" label="供应商编码"></el-table-column>
            <el-table-column
              prop="productName"
              label="供应商名称"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible = false"
          >取消</el-button
        >
        <el-button
          :size="size"
          type="primary"
          @click="savesupplier"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <!-- 选择参与店铺 -->
    <el-dialog
      :title="'添加参与店铺'"
      width="40%"
      :visible.sync="editDialogVisible2"
      :close-on-click-modal="false"
    >
      <div>
        <div>
          <el-form :inline="true" :model="dataForm" size="mini">
            <el-form-item label="店铺名称" label-width="100px">
              <el-input
                v-model="dataForm"
                placeholder=""
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item label="店铺编号" label-width="100px">
              <el-input
                v-model="dataForm"
                placeholder=""
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item label="所属商家编号" label-width="100px">
              <el-input
                v-model="dataForm"
                placeholder=""
                size="mini"
              ></el-input>
            </el-form-item>
            <el-form-item label="所属商家名称" label-width="100px">
              <el-input
                v-model="dataForm"
                placeholder=""
                size="mini"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-button size="mini" @click="querySupplierListForAdd2()"
            >查询</el-button
          >
          <el-button size="mini" @click="querySupplierListForAdd2()"
            >重置</el-button
          >
        </div>
        <div style="padding-top: 45px;">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="addSelectionChange"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="id" label="店铺编号"></el-table-column>
            <el-table-column
              prop="productName"
              label="店铺名称"
            ></el-table-column>
            <el-table-column
              prop="productName"
              label="所属商家"
            ></el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible2 = false"
          >取消</el-button
        >
        <el-button
          :size="size"
          type="primary"
          @click.native="editDialogVisible2 = false"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <!-- 导入、上传弹窗-->
    <el-dialog
      :title="operation ? '商品导入' : '下载模板'"
      :inline="true"
      width="20%"
      :visible.sync="uploadVisible"
      :close-on-click-modal="false"
    >
      <div style="padding-top: 15px;">
        <el-button type="primary" icon="el-icon-download" v-show="operation"
          >商品导入模板</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-upload"
          v-show="operation == false"
          >商品导入</el-button
        >
      </div>
    </el-dialog>
    <!--新增编辑界面-->
    <el-dialog
      :title="'添加商品'"
      :inline="true"
      width="65%"
      :visible.sync="productVisible"
      :close-on-click-modal="false"
    >
      <div>
        <el-form
          :model="dataForm"
          label-width="80px"
          ref="dataForm"
          :size="size"
        >
          <div class="col-sm-9">
            <el-form-item label="商品名称">
              <el-input v-model="dataForm.key" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-9">
            <el-form-item label="商品编码">
              <el-input v-model="dataForm.key" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-9">
            <el-form-item label="商品条码">
              <el-input v-model="dataForm.key" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-9">
            <el-form-item label="商品类目">
              <!-- <el-input v-model="dataForm.key" auto-complete="off"></el-input> -->
              <TreeSelect :props="props" :options="optionData" :value="valueId" :clearable="isClearable" :accordion="isAccordion" @getValue="getValue($event)" @check-change="handleCheckChange"
              style="width:200px"/>
            </el-form-item>
          </div>
          <div class="col-sm-9">
            <el-form-item label="商品品牌">
              <el-input v-model="dataForm.key" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="col-sm-9">
            <el-form-item label="商家名称">
              <el-input v-model="dataForm.key" auto-complete="off"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div style="padding-top: 45px;">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          @selection-change="addSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            prop="id"
            label="商品编码"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="productName"
            label="商品名称"
            width="180"
          ></el-table-column>
          <el-table-column prop="address" label="商品条码"></el-table-column>
          <el-table-column prop="unit" label="计量单位"></el-table-column>
          <el-table-column prop="shopName" label="商品品牌"></el-table-column>
          <el-table-column prop="price" label="商品类目"></el-table-column>
          <el-table-column
            prop="markdown"
            label="所属商家名称"
          ></el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="productVisible = false"
          >取消</el-button
        >
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { darkmagenta } from "color-name";
import { quillEditor } from "vue-quill-editor";
import TreeSelect from "@/views/Core/TreeSelect";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
const channelArr = ["bbc"];
const channelArr1 = ["APP端", "PC端", "微信"];
const channelArr2 = ["新用户", "老用户"];
const channelArr3 = ["普通会员"];
const channelArr4 = ["注册用户", "VIP会员", "金卡"];
export default {
  name: "Tab",
  components: {
    KtButton,
    TableColumnFilterDialog,
    quillEditor,
    TreeSelect
  },
  data() {
    return {
      supplier:false,
      addCouponSetShow: true,
      inputDisabled: true,
      couponSetData: [{ index: 1 }],
      size: "small",
      editDialogVisible: false,
      editDialogVisible2: false,
      url: "./static/shop.png",
      url2: "./static/shop2.png",
      content: null,
      editorOption: {},
      size: "small",
      productVisible: false,
      uploadVisible: false,
      operation: false, // true:商品导入, false:下载模板
      activeName: 0,
      setUp: false,
      search: false,
      filters: {},
      editLoading: false,
      dataForm: {},
      modalShow: 1,
      multipleSelection: [],
      tableDataSupplier:[],
      repelSelection: [],
      addSelection: [],
      businessList: [{ id: "001", name: "张小二服饰", type: "自营商家" }],
      shopList: [{ id: "161616", name: "张小二bbc店铺", type: "直营" }],
      tableData: [
        {
          id: 1912250010887324,
          productName: "新供应商001",
          unit: "件",
          shopName: "张小二服饰",
          price: 1.2,
          markdown: 1,
          shopLimit1: 100,
          shopLimit2: 100,
          shopLimit3: 100
        },
        {
          id: 1912250010887324,
          productName: "新供应商001",
          unit: "件",
          shopName: "张小二服饰",
          price: 1.2,
          markdown: 1,
          shopLimit1: 100,
          shopLimit2: 100,
          shopLimit3: 100
        }
      ],
      active: 1,
      radio1: 3,
      isChange: 0,
      radio2: 3,
      radio3: 3,
      radio4: 3,
      radio5: 3,
      filters: [],
      shopList: [],
      businessList: [],
      checkAll: false,
      checkAll1: false,
      checkAll2: false,
      checkAll3: false,
      checkAll4: false,
      checkedCities: ["bbc"],
      checkedCities1: ["APP端", "PC端", "微信"],
      checkedCities2: ["新用户", "老用户"],
      checkedCities3: ["普通会员"],
      checkedCities4: ["注册用户", "VIP会员", "金卡"],
      cities: channelArr,
      cities1: channelArr1,
      cities2: channelArr2,
      cities3: channelArr3,
      cities4: channelArr4,
      isIndeterminate: true,
      isIndeterminate1: true,
      isIndeterminate2: true,
      isIndeterminate3: true,
      isIndeterminate4: true,
      isClearable:true,      // 可清空（可选）
      isAccordion:true,      // 可收起（可选）
      valueId:20,            // 初始ID（可选）
       props:{ // 配置项（必选）
        value: 'id',
        label: 'name',
        children: 'children',
        // disabled:true
      },
      // 选项列表（必选）
      list:[
        {id:2,parentId:0,name:"居家生活",rank:1},
        {id:4,parentId:0,name:"数码家电",rank:1},
        {id:5,parentId:0,name:"母婴保健",rank:1},
        {id:6,parentId:0,name:"美食酒水",rank:2},
        {id:7,parentId:0,name:"个护清洁",rank:2},
        {id:9,parentId:0,name:"好物甄选",rank:2},
        {id:101,parentId:2,name:"个护健康",rank:3},
        {id:102,parentId:2,name:"3C数码",rank:4},
        {id:103,parentId:2,name:"汽车用品",rank:5},
        {id:202,parentId:101,name:"按摩电器",rank:5},
        {id:203,parentId:101,name:"个护美容",rank:5}
      ]
    };
  },
  methods: {

    savesupplier(){
      this.tableDataSupplier=this.tableDataSupplier.concat(this.addSelection)
      this.supplier=true
      this.editDialogVisible=false
    },
    changeRadio: function(data) {
      if (data == 0) {
        this.addCouponSetShow = true;
        this.inputDisabled = true;
      } else {
        this.addCouponSetShow = false;
        this.inputDisabled = false;
      }
    },
    removeCouponSet: function(index, row) {
      let this_ = this;
      var temp = [];
      $.each(this_.couponSetData, function(key, val) {
        if (key == index) {
        } else {
          temp.push(val);
        }
      });

      this_.couponSetData = temp;
    },
    addCouponSet: function(data) {
      let this_ = this;
      let index = this_.couponSetData.length + 1;
      let obj = { index };
      this_.couponSetData.push(obj);
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? channelArr : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    handleCheckAllChange1(val) {
      this.checkedCities1 = val ? channelArr1 : [];
      this.isIndeterminate1 = false;
    },
    handleCheckedCitiesChange1(value) {
      let checkedCount = value.length;
      this.checkAll1 = checkedCount === this.cities1.length;
      this.isIndeterminate1 =
        checkedCount > 0 && checkedCount < this.cities1.length;
    },
    handleCheckAllChange2(val) {
      this.checkedCities2 = val ? channelArr2 : [];
      this.isIndeterminate2 = false;
    },
    handleCheckedCitiesChange2(value) {
      let checkedCount = value.length;
      this.checkAll2 = checkedCount === this.cities2.length;
      this.isIndeterminate2 =
        checkedCount > 0 && checkedCount < this.cities2.length;
    },
    handleCheckAllChange3(val) {
      this.checkedCities3 = val ? channelArr3 : [];
      this.isIndeterminate3 = false;
    },
    handleCheckedCitiesChange3(value) {
      let checkedCount = value.length;
      this.checkAll3 = checkedCount === this.cities3.length;
      this.isIndeterminate3 =
        checkedCount > 0 && checkedCount < this.cities3.length;
    },
    handleCheckAllChange4(val) {
      this.checkedCities4 = val ? channelArr4 : [];
      this.isIndeterminate4 = false;
    },
    handleCheckedCitiesChange4(value) {
      let checkedCount = value.length;
      this.checkAll4 = checkedCount === this.cities4.length;
      this.isIndeterminate4 =
        checkedCount > 0 && checkedCount < this.cities4.length;
    },
    querySupplierListForAdd() {
      this.editDialogVisible = true;
    },
    querySupplierListForAdd2() {
      this.editDialogVisible2 = true;
    },
    delAllSelectedSupplier() {},
    next() {
      if (this.active == 4) {
        this.$message({ message: "操作成功", type: "success" });
        return;
      }
      if (this.active++ > 3) this.active = 1;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    repelSelectionChange(val) {
      this.repelSelection = val;
    },
    addSelectionChange(val) {
      this.addSelection = val;
    },
    createPage() {
      this.$router.push("/CreatePromotion");
    },
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.name == "0") {
        // 触发‘配置管理’事件
        this.first();
      } else {
        // 触发‘用户管理’事件
        this.second();
      }
    },
    first() {
      console.log("生效商品");
      this.modalShow = 1;
    },
    second() {
      console.log("互斥商品");
      this.modalShow = 2;
    },
    //添加商品弹窗
    productSelectionModal() {
      this.productVisible = true;
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
        console.log(this.$refs.selectTree);
    },
    showBatchSetUp() {
      if (this.search == true) {
        this.search = false;
      }
      if (this.setUp == false) {
        this.setUp = true;
      } else if (this.setUp == true) {
        this.setUp = false;
      }
    },
    showQueryCondition() {
      if (this.setUp == true) {
        this.setUp = false;
      }
      if (this.search == false) {
        this.search = true;
      } else if (this.search == true) {
        this.search = false;
      }
    },
    batchReAdd() {
      if (this.multipleSelection.length < 1) {
        this.$message({ message: "请选择要设置的商品", type: "error" });
        return false;
      }
      this.$message({ message: "操作成功", type: "success" });
    },
    updatePriceAndLimit() {},
    importCommodityModal(val) {
      if (val === 1) {
        this.operation = true;
      } else if (val == 2) {
        this.operation = false;
      }
      this.uploadVisible = true;
    }

  },
    computed:{
    /* 转树形数据 */
    optionData(){
      let cloneData = JSON.parse(JSON.stringify(this.list))      // 对源数据深度克隆
      return  cloneData.filter(father=>{                      // 循环所有项，并添加children属性
          let branchArr = cloneData.filter(child=>father.id == child.parentId);       // 返回每一项的子级数组
          branchArr.length>0 ? father.children=branchArr : ''   //给父级添加一个children属性，并赋值
          return father.parentId==0;      //返回第一层
      });
    }
  },
  mounted() {}
};
</script>

<style scoped>
.pdL10 {
  padding-left: 10px !important;
}
.mgB15 {
  margin-bottom: 15px !important;
}
.border-left {
  border-left: 3px #ddd solid !important;
}
.font-bold {
  font-weight: 700;
}
.form-group {
  margin-bottom: 15px !important;
  margin-right: -0px !important;
  margin-left: -0px !important;
}
.form-horizontal .control-label {
  padding-top: 5px;
  margin-bottom: 0;
  text-align: right;
}
.form-horizontal div {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif,
    "Regular", "Microsoft YaHei";
  font-size: 12px;
  color: #666666;
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
  line-height: 1.42857143;
  word-wrap: break-word;
}
.form-horizontal .control-label {
  padding-top: 3px !important;
}
.col-sm-2 {
  width: 16.66666667%;
}
/* .col-sm-10 {
    width: 83.33333333%;
} */
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
  float: left;
}
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
label {
  font-weight: normal;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}
.form-group .pdt3px {
  padding-top: 3px;
}
.b-b {
  border-bottom: 1px solid #dddddd;
}
.line-dashed {
  border-style: dashed !important;
  background-color: transparent;
  border-width: 0;
}
.line-lg {
  margin-top: 15px;
  margin-bottom: 15px;
}
.line {
  width: 100%;
  height: 2px;
  margin: 10px 0;
  font-size: 0;
  overflow: hidden;
}
table {
  background-color: transparent;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
.i-checks {
  padding-left: 0;
  margin-right: 15px;
  cursor: pointer;
  color: #666666;
}
.radio-inline,
.checkbox-inline {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  vertical-align: middle;
  cursor: pointer;
}
.panel-body tr {
  padding: 0 15px;
}
.mgt15 {
  margin-top: 15px;
}
</style>
